<template>
	<view class="bg-w border-radius-16">
		<view class="address-info flex flex-align-center flex-space-between">
			<view class="">
				<view class="flex flex-align-end">
					<text class="font32 color-b3 f-b">
						{{ dataItem.name }}
					</text>	
					<text style="margin-left: 16rpx;" class="font24 color-8E8E8E f-b">
						{{ dataItem.mobile }}
					</text>	
				</view>
				<view class="m-t-10 font24 color-b3">
					{{ dataItem?.provinceText }}{{ dataItem?.cityText }}{{ dataItem?.areaText }}{{ dataItem.detailAddress }}
				</view>
			</view>	
			<image style="width: 28rpx;height: 30rpx;" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/my/ic_edit.png" mode="" @click.stop="onEditAdress" />
		</view>
		<view class="button-box flex flex-align-center flex-space-between">
			<radio style="transform:scale(0.8)" color='#00AB97' :checked="dataItem.defaulted" @click.stop="onRadioChange">
				<text class="color-8E8E8E">
					{{ dataItem.defaulted ? '已设默认' : '默认' }}
				</text>
			</radio>
			<!-- <label class="flex flex-align-center">
				<view>
					<radio style="transform:scale(0.8)" color='#00AB97' :checked="dataItem.isDefault" @click="onRadioChange">默认地址</radio>
				</view>
				<view class="font24 color-8E8E8E">默认地址</view>
			</label>
			<view class="font24 color-8E8E8E">默认地址</view> -->
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		dataItem: {
			type: Object,
			default: {}
		}
	})
	
	const emits = defineEmits(['onEdit', 'onRadioChange']);
	
	const onEditAdress = () => {
		emits('onEdit', props.dataItem);
	}
	
	const onRadioChange = () => {
		const item = {...props.dataItem};
		emits('onRadioChange', item);
	}
	
</script>

<style lang="scss" scoped>
	.address-info {
		border-radius: 16rpx;
		padding: 30rpx 32rpx;
	}
	.button-box {
		border-top: 2rpx solid #E5E5E5;
		padding: 16rpx 30rpx;
	}
</style>
